<script>
import request from '../request';
import { ElMessage } from 'element-plus';
import { reactive, toRefs } from 'vue';
import Homelayout from '../components/homelayout.vue';
export default {
	name: 'HomePage',
	components: { Homelayout },
	setup() {
		const data = reactive({
			page: 1,
			size: 10,
			list: [],
			value: '',
			options: [],
			total: 10,
			nomore: false,
		});
		const getOption = () => {
			data.options = [];
			request('/getHome', { type: 'sign' }).then((res) => {
				console.log('用户注册信息', res);
				if (res.status === 'S') {
					res.data.forEach((item) => {
						let obj = {
							value: item._id,
							label: item.data.userName,
						};

						data.options.push(obj);
					});
					data.options.unshift({ value: '', label: '全部' });
				}
			});
		};
		// 初始化加载信息
		const init = (page = 1, size = 10) => {
			data.page = page;
			data.size = size;
			data.list = [];
			const params = {
				page,
				size,
				type: 'home',
				id: data.value,
			};
			request('/getHome', params).then((res) => {
				console.log('虎丘', res);
				if (res.status === 'S') {
					if (res.data.length > 0) {
						data.list = res.data;
						data.total = res.count.total;
						data.nomore = false;
					} else {
						data.list = [];
						data.total = 10;
						data.nomore = true;
					}
				} else {
					data.nomore = true;
				}
			});
		};
		init();
		getOption();
		// 查询
		const goSearch = () => {
			init(1, 10);
		};
		// 分页事件
		const pageChange = (e) => {
			console.log('e', e);
			init(e, data.size);
		};
		const pageChange1 = (e) => {
			console.log('e', e);
			init(data.page, e);
		};
		return {
			...toRefs(data),
			goSearch,
			pageChange,
			pageChange1,
		};
	},
};
</script>
<template>
	<div class="home-page flexc">
		<div class="home-nav flexr flexcc">
			<div class="flexr flexcc">
				<p>查看角色：</p>
				<el-select v-model="value" class="m-2" placeholder="Select" size="large">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<el-button @click="goSearch" type="primary" size="large" class="ml-20">查询</el-button>
		</div>
		<homelayout :list="list" :nomore="nomore" />
		<div class="home-footer flexr flexcc flex-j-e">
			<el-pagination
				v-model:current-page="page"
				v-model:page-size="size"
				:page-sizes="[10, 20, 30, 40, 50]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@current-change="pageChange"
				@size-change="pageChange1"
				hide-on-single-page
			/>
		</div>
	</div>
</template>
<style lang="less">
.home-page {
	width: 100%;
	height: 100%;

	.ml-20 {
		margin-left: 20px;
	}

	.home-wrap {
		margin: 10px 0;
	}
	.box {
		padding: 20px 40px;
		border-bottom: 1px solid #ccc;
		.box-title {
			font-size: 20px;
			font-weight: bold;
		}
		.box-info {
			margin: 10px 0;
			color: #ccc;
		}
	}

	.img {
		width: 200px;
		height: 200px;
		border-radius: 6px;
	}
	.img-b {
		margin: 10px 0;
	}

	.mr-20 {
		margin-right: 20px;
	}
	.mb-10 {
		margin-bottom: 10px;
	}
}
</style>
